<template>
  <!-- 3用户抗定位 -->
  <div>
    <div class="tc">
      <!-- 抗定位任务配置弹窗 -->
      <el-dialog
        class="maindialog"
        title="抗定位任务配置"
        :visible.sync="dialogFormVisible"
        width="800px"
        z-index="1000"
      >
        <el-form :model="form" ref="form">
          <el-descriptions title="风险信息" :column="2">
            <el-descriptions-item label="用户名">
              {{ showData.username }}
            </el-descriptions-item>
            <el-descriptions-item label="泄露地点">
              {{ showData.locationLeak }}
            </el-descriptions-item>
            <el-descriptions-item label="泄露坐标">
              ({{ showData.locationLat }},{{ showData.locationLon }})
            </el-descriptions-item>
            <el-descriptions-item label="定位地点">
              {{ showData.locationPos }}
            </el-descriptions-item>
          </el-descriptions>
          <el-form-item
            label="抗定位方式："
            :label-width="formLabelWidth"
            prop="method"
          >
            <el-radio @input="radioC" v-model="form.method" label="社交内容混淆"
              >社交内容混淆</el-radio
            >
            <el-radio @input="radioC" v-model="form.method" label="社交关系混淆"
              >社交关系混淆</el-radio
            >
          </el-form-item>
          <el-form-item
            label="设置混淆后位置："
            :label-width="formLabelWidth"
            prop="targetLocation"
          >
            <!-- <el-input v-model="form.targetLocation" style="width: 190px" placeholder="请输入想要混淆到的地点"/> -->
            <el-select
              v-if="form.method=='社交内容混淆'"
              v-model="form.targetLocation"
              style="width: 190px"
              placeholder="请选择想要混淆到的地点"
              clearable
            >
              <el-option
                v-for="dict in dict.type.confuse_city"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <el-select
              v-if="form.method=='社交关系混淆'"
              v-model="form.targetLocation"
              style="width: 190px"
              placeholder="请选择想要混淆到的地点"
              clearable
            >
              <el-option
                v-for="dict in dict.type.confuse_city2"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <el-alert
          title="该操作会修改用户社交内容与社交关系，请谨慎操作！"
          type="warning"
          show-icon
          style="width: 250px; position: relative; left: 400px; top: -70px"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false"> 取 消 </el-button>
          <el-button type="primary" @click="submitForm"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      class="maindialog2"
      :visible.sync="dialogDetails"
      width="30%"
      z-index="10000"
    >
      <template #title>
        <div
          style="
            font-weight: bold;
            font-size: 20px;
            color: #fff;
            text-align: center;
          "
        >
          新建用户抗定位任务
        </div>
      </template>
      <span class="dialogDetailstext"
        >新建用户抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addTask } from "@/api/combatUser/antiLocalization";

export default {
  props: {
    initData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    initData: function (val) {
      this.showData = val;
      this.dialogFormVisible = true;
      console.log("showDatashowDatashowData", this.showData);
    },
  },
  dicts: ["confuse_city","confuse_city2"],
  data() {
    return {
      showData: {},
      dialogFormVisible: false,
      dialogDetails: false,
      input: "",
      form: {
        method: "社交内容混淆", //混淆类型
        targetLocation: "", //混淆后位置
        id: "",
      },
      formLabelWidth: "180px",
    };
  },
  methods: {
    radioC(){
      this.form.targetLocation = "";
    },
    closeFn() {
      this.$emit("closeFn");
    },
    /** 提交按钮 */
    submitForm() {
      //新增之前进行判断 混淆之后为空不可新增
      if (this.form.targetLocation == "") {
        this.$modal.msgError("混淆后位置不能为空");
        return;
      }

      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.id = this.showData.id;
          this.form.warnid = this.showData.id;
          //全局loading
          this.$modal.loading("正在新增抗定位任务，请稍候...");
          addTask(this.form)
            .then((response) => {
              this.$modal.msgSuccess("新增成功");
              //路由跳转
              this.dialogFormVisible = false;
              this.$router.push("/networkUser/antiLocalization");
            })
            .finally(() => {
              this.$modal.closeLoading();
            });
        }
      });
    },
    showDetails() {
      this.dialogFormVisible = false;
      this.dialogDetails = true;
    },
    toestimate() {
      this.$router.push("/userestimate");
    },
  },
  mounted() {},
};
</script>

<style scoped>
.body2 {
  width: 100%;
  /* position: absolute; */
  padding: 10px;
  color: #90cee9;
  font-size: 16px;
}

.tc {
  position: absolute;
  bottom: 50%;
  right: 25%;
  width: 350px;
  height: 200px;
  z-index: 1001;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 7px;
  text-align: left;
  font-style: normal;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.bt {
  position: absolute;
  top: 80%;
  right: 10%;
  text-align: center;
  .bt1 {
    font-size: 13px;
    width: 80px;
    height: 30px;
    background: linear-gradient(270deg, #2db2fd 0%, #0e5fff 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
    line-height: 11px;
  }
}

.dialog-footer {
  text-align: center;

  .el-button {
    font-size: 13px;
    width: 100px;
    background: linear-gradient(270deg, #2db2fd 0%, #0e5fff 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
  }
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}

.maindialog {
  .el-dialog__body {
    .el-descriptions__body {
      font-size: 17px;
    }

    .el-checkbox__label {
      font-size: 18px;
      color: #fff;
    }

    .el-form-item__label {
      position: absolute;
      /* left: 5px; */
      width: 0;
      text-align: left;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.red-text {
  color: red;
}
</style>
